<template>
 <div class="block text-center" m="t-4">
    <el-carousel trigger="click" height="332px">
      <el-carousel-item class="banner-item" v-for="item in news" :key="item"
        :style="{
          backgroundImage: `url(${item.img})`,
          backgroundSize: 'cover',
          backgroundRepeat: 'no-repeat',
        }"

      >
        <div class="news-item" >
          <h1 class="small justify-center" text="2xl">{{ item.title }}</h1>
          <h2>{{ item.content }}</h2>
          <p>
            <el-button color="none" type="primary" round>了解更多 -></el-button>
            <el-button color="none"  round :icon="PhoneFilled"></el-button>
          </p>
        </div>
      </el-carousel-item>
    </el-carousel>
  </div>
</template>
<script setup lang="ts">

import { PhoneFilled } from '@element-plus/icons-vue'

const news = [
  {
    title: '',
    content: '',
    img: '/public/title/31102315s9lc.jpg'
  },
  {
    title: '天津市政府与中软国际、深开鸿签署战略协议',
    content: '共建北方开源鸿蒙之城',
    img: '/public/title/24133849s3gq.jpg'
  },
  {
    title: '拉动鲲鹏教育产业生态',
    content: '中软国际教育科技集团助力高校人才发展战略',
    img: '/public/title/09172824e62v.jpg'
  },
]

</script>
<style scoped>


.news-item {
  width: 80%;
  height: 100%;
  margin: 0 auto;
  position: relative;


  h1 {
    margin-top: 80px;
    color: #fff;
  }

  h2 {
    line-height: 42px;
    margin: 0;
    color: #fff;
  }

  p {
    position: absolute;
    top: 50%;
    left: 0;


    .el-button {
      span {
        font-size: 28px;
      }
    }
  }

}



.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
</style>
